<template>
<h2>sonDemo3 - replace 属性</h2>
<div class="note">
  <h3>replace VS push</h3>
  <p>replace: 替换当前的路由记录，用户无法通过后退按钮回到被替换的页面。</p>
  <p>push: 默认方式，将新的路由推入历史栈，允许用户使用浏览器的后退按钮返回到之前的页面。</p>
</div>
<div class="note">
  <h3>方法</h3>
  <p>方法一：使用 router.replace 方法</p>
  <p>方法二：使用 `router-link`的 replace 属性</p>
</div>
<div>
  <h1>登录</h1>
    <form @submit.prevent="handleLogin">
      <input type="text" v-model="username" placeholder="用户名" required />
      <input type="password" v-model="password" placeholder="密码" required />
      <button type="submit">登录</button>
    </form>
    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
</div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 输入的用户名和密码
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const router = useRouter();

const handleLogin = () => {
  // 假设的登录逻辑
  if (username.value === 'admin' && password.value === 'password') {
    // 登录成功，使用 push 跳转到用户主页
    router.push({ name: 'UserHome' });
  } else {
    // 登录失败，使用 replace 跳转到错误提示页面
    errorMessage.value = '用户名或密码错误！';
    router.replace({ name: 'ErrorPage' }); // 假设存在错误提示页面
  }
};

</script>

<style scoped>
.error {
  color: red;
  margin-top: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>